<template>
  <div>

    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane label="轮播图配置">
        <bannerVue ref="banner_ref"></bannerVue>
      </el-tab-pane>
      <el-tab-pane label="轮播下方配置">
        <bannerinferior ref="bannerinferior_ref"></bannerinferior>
      </el-tab-pane>
      <el-tab-pane label="网吧展示配置">
        <barVue ref="bar_ref"></barVue>
      </el-tab-pane>
      <el-tab-pane label="合作伙伴配置">
        <cooperation ref="cooperation_ref"></cooperation>
      </el-tab-pane>

      <el-tab-pane label="热点解读配置">
        <hot ref="hot_ref"></hot>
      </el-tab-pane>
      <!-- <el-tab-pane label="产品介绍配置">产品介绍配置</el-tab-pane> -->
      <el-tab-pane label="宣传素材配置">
        <material ref="material_ref"></material>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import bannerVue from './confg/banner.vue'
import bannerinferior from './confg/bannerinferior.vue'
import material from './confg/material.vue'
import hot from './confg/hot.vue'
import barVue from './confg/bar.vue'
import cooperation from './confg/cooperation.vue'
const banner_ref = ref(null)
const material_ref = ref(null)
const hot_ref = ref(null)
const bannerinferior_ref = ref(null)
const bar_ref = ref(null)
const cooperation_ref = ref(null)
 
const tabClick = (pane, ev) => {
  console.log(pane.props.label, ev)
  let index = pane.index
  let name = pane.props.label
  if (name == '轮播图配置') {
    // console.log();
    banner_ref.value.get_banner()
  } else if (name == '轮播下方配置') {
    bannerinferior_ref.value.get_list()
  } else if (name == '热点解读配置') {
    hot_ref.value.get_list()
  } else if (name == '宣传素材配置') {
    material_ref.value.get_list()
  }else if (name == '网吧展示配置') {
    bar_ref.value.get_list()
  }else if (name == '合作伙伴配置') {
    cooperation_ref.value.get_list()
    cooperation_ref.value.get_cooperlist()
    
  }
}
</script>
 
<style scoped>
</style> 